import searchimg from "../../../../imgs/searchimg.png";
import product from "../../../../imgs/product-1.jpg";
import HttpUtils from "../../common/utils/HttpUtils";
import Rest from "@module/Rest";
import ImageWithError from "@page/common/comps/ImageWithError";
import Uts from "@module/Uts";

export default class DetailCenterLeft extends React.Component {
    constructor() {
        super();
        this.lists = [];
        this.state = {
            open: -1,
            categorys: null
        };
        this.searchText = "";
    }

    componentDidMount() {
        this.findCategory();
    }

    findCategory() {
        const { suppId } = this.props;
        HttpUtils.findCategory(suppId)
            .then(res => {
                console.log(res);
                this.setState({
                    categorys: res.categorys
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    onInputChange = e => {
        this.searchText = e.target.value;
    };

    clickToSearch = () => {
        const { suppId } = this.props;
        $state.go({
            stateName: "/supplierShop",
            params: {
                suppId: suppId,
                keyword: this.searchText
            }
        });
    };

    render() {
        const { open, categorys } = this.state;
        const { hideHot, suppname, suppId,inSuppShop } = this.props;
        if (!categorys) {
            if (!hideHot) {
                return (
                    <div className={"detail-center-left"}>
                        <DetailCenterHot noMarginTop={true} suppId={suppId} inSuppShop={inSuppShop} />
                    </div>
                );
            }
            return null;
        }

        return (
            <div className={"detail-center-left"}>
                <div className={"detail-center-search"}>
                    <input
                        type="text"
                        placeholder={"本店搜索"}
                        onChange={this.onInputChange}
                    />
                    <div
                        onClick={this.clickToSearch}
                        className={"detail-center-search-icon"}
                    >
                        <img src={searchimg} alt="" />
                    </div>
                </div>
                <div className={"detail-center-product-cati"}>
                    <div className={"detail-center-cati-header"}>
                        <p>商品分类</p>
                    </div>
                    {categorys &&
                        categorys.map((item, index) => (
                            <CatiItem
                                suppId={suppId}
                                suppname={suppname}
                                inSuppShop={inSuppShop}
                                open={open == index}
                                key={index}
                                item={item}
                                setOpen={() => {
                                    if (open == index) {
                                        this.setState({
                                            open: -1
                                        });
                                    } else {
                                        this.setState({
                                            open: index
                                        });
                                    }
                                }}
                            />
                        ))}
                </div>

                {!hideHot && <DetailCenterHot suppId={suppId} />}
            </div>
        );
    }
}

class DetailCenterHot extends React.Component {
    constructor() {
        super();
        let loginSuppId=Uts.getCookie('suppId');
        let routerSuppId=$state.params&&$state.params.suppId;
        this.lists = [1, 2, 3, 4];
        this.state = {
            choosed: 0,
            lists: null,
            isSuppSelf:loginSuppId==routerSuppId? true:false
        };
    }

    componentDidMount() {
        this.getHotProduct();
    }

    getHotProduct() {
        let flag = 1;
        this.getProducts(flag);
    }

    getNewProduct() {
        let flag = 2;
        this.getProducts(flag);
    }

    getProducts(flag) {
        const { suppId } = this.props;
        let url = `/store/api/product/getHotAndNewProducts`;
        let params = {
            suppId: suppId,
            flag: flag
        };

        Rest.post(url, params)
            .then(res => {
                this.setState({
                    lists: res.data
                });
            })
            .catch(err => {});
    }


    render() {
        const { choosed, lists,isSuppSelf } = this.state;
        if (!lists) {
            return null;
        }
        const { noMarginTop } = this.props;
        return (
            <div
                className={
                    noMarginTop ? "detail-center-hot1" : "detail-center-hot"
                }
            >
                <div className={"detail-center-hot-title"}>
                    <div
                        onClick={() => {
                            this.setState(
                                {
                                    choosed: 0
                                },
                                this.getHotProduct
                            );
                        }}
                        className={
                            choosed == 0
                                ? "detail-center-hot-hot"
                                : "detail-center-hot-new"
                        }
                    >
                        <p>店铺热销</p>
                    </div>
                    <div className={"detail-center-hot-title-line"} />
                    <div
                        onClick={() => {
                            this.setState(
                                {
                                    choosed: 1
                                },
                                this.getNewProduct
                            );
                        }}
                        className={
                            choosed == 1
                                ? "detail-center-hot-hot"
                                : "detail-center-hot-new"
                        }
                    >
                        <p>店铺新品</p>
                    </div>
                </div>
                <div className={"detail-center-hot-item-wrapper"}>
                    {lists &&
                        lists.map((item, index) => {
                            const {
                                price,
                                photo,
                                productName,
                                saleAmount
                            } = item;
                            return (
                                <div
                                    onClick={() => {
                                        window.open(
                                            `#detail?productId=${item.productId}&suppId=${item.suppId}`
                                        )
                                    }}
                                    key={index}
                                    className={"detail-center-hot-item"}
                                >
                                    <ImageWithError src={photo} />
                                    <p
                                        className={
                                            "detail-center-hot-item-price"
                                        }
                                    >
                                        {(!global.hasLogin&&!isSuppSelf)? (global.isSupp? `单位登录可见`:`登录可见`):`￥${price}`}
                                    </p>
                                    <p
                                        className={
                                            "detail-center-hot-item-name"
                                        }
                                    >
                                        {productName}
                                    </p>
                                    <p className={"detail-center-hot-item-num"}>
                                        热销{(!global.hasLogin&&!isSuppSelf)? '***':saleAmount}件
                                    </p>
                                </div>
                            );
                        })}
                </div>
            </div>
        );
    }
}



class CatiItem extends React.Component {
    constructor() {
        super();
        this.state = {
            // open:false
        };
        this.lists = [
            "台架夹盘类",
            "加液滴液",
            "筒缸勺铲镊",
            "毛刷",
            "加热",
            "硅胶",
            "木制品",
            "进样取样",
            "不锈钢制品",
            "其他辅助耗材"
        ];
    }

    render() {
        const { open, setOpen, item, suppname, suppId,inSuppShop } = this.props;
        const lists = item.childModel;

        return (
            <div>
                <div onClick={setOpen} className={"detail-center-cati-item"}>
                    <div className={"detail-center-cati-icon"}>
                        {open ? (
                            <p className={"detail-center-cati-icon-open"}>
                                {"-"}
                            </p>
                        ) : (
                            <p>{"+"}</p>
                        )}
                    </div>
                    <p
                        onClick={(e)=>{
                            e.stopPropagation()
                            if(inSuppShop){
                                $state.go({
                                    stateName: "/supplierShop",
                                    params: {
                                        suppId: suppId,
                                        categoryId:item.id
                                    }
                                });
                            }else{
                                window.open(
                                    `#supplierShop?suppId=${suppId}&categoryId=${item.id}`
                                )
                            }
                        }}
                        className={"detail-center-cati-txt"}>{item.name}</p>
                </div>
                {open && (
                    <div className={"detail-center-cati-open"}>
                        {lists &&
                            lists.map((item, index) => (
                                <div
                                    onClick={() => {
                                        if(inSuppShop){
                                            $state.go({
                                                stateName: "/supplierShop",
                                                params: {
                                                    suppId: suppId,
                                                    categoryId:item.id
                                                }
                                            });
                                        }
                                        else{
                                            window.open(
                                                `#supplierShop?suppId=${suppId}&categoryId=${item.id}`
                                            )
                                        }
                                    }}
                                    key={item.name}
                                    className={"detail-center-cati-open-item"}
                                >
                                    <p
                                        className={
                                            "detail-center-cati-open-dot"
                                        }
                                    />
                                    <p
                                        className={
                                            "detail-center-cati-open-txt"
                                        }
                                    >
                                        {item.name}
                                    </p>
                                </div>
                            ))}
                    </div>
                )}
            </div>
        );
    }
}
